<template>
    <div class="coupon_select activity">
       <navbar>选择野练PASS</navbar>
       <div class="noList" v-if="isList">您没有可用的野练PASS。。。</div>
       <div class="wrapper" v-if="!isList">
          <div class="content" v-if="coupon">
            <div class="coupon_list">
              <div class="list checkBox_custom checkbox_list">
                <ul>
                  <li v-for="(i,index) in coupon">
                    <span class="vmc-checkbox vmc-checkbox_list">
                      <input type="checkbox" :id="i.id" v-model="cpChecked" :value="i" style="display: none">
                      <label class="items" :for="i.id">
                        <div class="liIn">
                          <div class="coupon_l">
                            <div class="coupon_l_l"></div>
                            <div class="coupon_l_r">
                              <p class="vmc-nowrap-2">{{ i.discount.title }}</p>
                            </div>
                          </div>
                          <div class="coupon_r">
                            <h2>
                              <button class="coupon_tag">野练</button>
                              <span>野练PASS</span>
                            </h2>
                            <p>{{ i.starts_at | date(i.ends_at) }}</p>
                          </div>
                        </div>
                      </label>
                    </span>


                    <!--<checkbox max="1" :checked.sync="couponChecked" :value="i">-->

                    <!--</checkbox>-->
                  </li>
                </ul>
              </div>
            </div>
          </div>
         <div class="bottomBar">
           <button @click="subSel">确定</button>
         </div>
       </div>
    </div>
</template>
<script type="text/ecmascript-6">
  import js from '../../../../cores/coupon/select.vue';
  export default {
    extends: js
  }
</script>
<style rel="stylesheet/less" lang="less">
  @import "../../../../styles/ot.less";
  .vmc-nowrap-2 {
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
</style>
